<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .test {
        background-color: green;
      }
      .one {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1 style="color: red; font-size: 30px" class="test">样式</h1>
      <div :class="str">one</div>
      <div :class="arr">two</div>
      <div :class="obj">three</div>

      <hr />

      <div :style="styleObj">123</div>
      <div :style="styleArr">345</div>
    </div>

    <script src="./vue.js"></script>
    <script>
      Vue.config.productionTip = false
      const vm = new Vue({
        // el绑定模板
        el: '#app',
        //data定义模板中要使用的数据
        data: {
          str: 'test',
          arr: ['test', 'one'],
          obj: {
            // test: true 表示要让这个test类名生效
            test: true,
            // one: false 表示one这个类名不生效
            one: true,
          },

          styleObj: { fontSize: '80px', color: 'blue' },
          styleArr: [
            {
              fontSize: '80px',
              color: 'blue',
            },
            {
              backgroundColor: 'red',
              border: '1px solid black',
            },
          ],
        },
      })
    </script>
  </body>
</html>
